<template>
	<view>
		<!-- <editor-bar ref="editorValue" v-model="content" :isClear="isClear" @change="change"></editor-bar>
		<view style="display: flex;">
			<u-button type="primary" :plain="buttonType" @click.stop="saveHtml('commentRe', 0)" style="width: 50%;">评论</u-button>
			<u-button type="warning" :plain="buttonType" @click="saveHtml('commentRe', 1)" style="width: 50%;">匿名评论</u-button>
		</view> -->
		<view style="margin: 5px 15px;" v-if="totalRow>0">全部评论({{totalRow}})</view>
		<view class="comment" v-for="(res, index) in commentListRD" :key="res.id" v-if="commentListRD.length>0">
			<view class="left"><image :src="res.url" mode="aspectFill"></image></view>
			<view class="right">
				<view class="top">
					<view class="name">{{ res.createUserName }}</view> 
					<view class="like" :class="{ highlight: res.isLike }">
						<view class="num">{{ res.likeNum }}</view>
						<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike(index)"></u-icon>
						<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
					</view>
				 </view>
				<view class="content"><u-parse :html="res.content"></u-parse></view>
				<view class="reply-box">
					<view class="item" v-for="(item, index) in res.replays" :key="item.index">
						<view class="username">{{ item.createUserName }} 回复 {{item.parentCreateUserName}}</view>
						<view class="text"><u-parse :html="item.content"></u-parse></view>
						<view class="bottom" style="position: relative;font-size: 12px;">
							{{ item.updateTime }}
							<view class="reply" style="position: absolute;right: 0;top: 0;">
								<text @click="replyRed(item)">回复</text>
								<text style="padding-left: 10px;" @click="deleteMobel(item.commentId)">删除</text>
							</view>
						</view>
					</view> 
					<!-- <view class="all-reply" @tap="toAllReply" v-if="res.replays != ''">
						共{{ res.replays.length }}条回复
						<u-icon class="more" name="arrow-right" :size="26"></u-icon>
					</view> -->
				</view>
				<view class="bottom">
					{{ res.updateTime }}
					<view class="reply">
						<text @click="replyRed(res)">回复</text>
						<text style="padding-left: 10px;" @click="deleteMobel(res.commentId)">删除</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-if="commentListRD.length===0" mode="list">暂无数据</u-empty>
		<!-- 功能菜单 -->
		<u-popup  v-model="show"  mode="bottom" :closeable="closeable" :close-icon-pos="closeIconPos" :close="popClose"
			:open="popOpen"
			>
		<view style="padding: 16rpx;width: 100%;">
			<editor-bar class="editorBar" :index="index" :item="item" :value="item.value" :disabled="item.disabled" :relation="item.relation" @value-change="fieldValueChange" type="replyType"></editor-bar>
			<!-- <u-field label-width="5" :focus="pl_edt" type="textarea" v-model="msg_user" style="border: 1px solid #1E88E5;" > </u-field> -->
			<view class="bottom" style="display: flex;margin-top: 20rpx;" v-if="pid === undefined">
				<u-button type="primary" @click.stop="saveHtml('commentRe', 0)" style="width: 50%;">提交评论</u-button>
				<u-button type="warning" @click.stop="saveHtml('commentRe', 1)" style="width: 50%;">匿名评论</u-button>
			</view>
			<view class="bottom" style="display: flex;margin-top: 20rpx;" v-else>
				<u-button type="primary" @click.stop="saveHtml('replyRed', 0)" style="width: 50%;">提交回复</u-button>
				<u-button type="warning" @click.stop="saveHtml('replyRed', 1)" style="width: 50%;">匿名回复</u-button>
			</view>
		</view>
		</u-popup>
		<!-- 悬浮的评论按钮 -->
	<view class="discussBtn" @click="replyRed()">
			<u-icon name="edit-pen" :size="40" color="#ffffff"></u-icon>
		</view>
		<u-modal
			v-model="showDelete"
			:content="contentDelete"
			title="删除提示"
			:title-style="{color:'#ED6717'}"
			:show-cancel-button="true"
			:mask-close-able="true"
			@confirm="deleteComBbs"></u-modal>
		<!-- 评论内容为空时的提示 -->
		<u-toast ref="uToast" /> 
	</view>
</template>
<script>
	import {
	    mapGetters
	} from 'vuex'
import {
	KmsAddCommentBbs,
	KmsDeleteCommentBbs,
	KmsCommentListBbs,
} from '@/api/kms/bbs.js';
import EditorBar from '@/pages/kmsManagement/common/editorPl.vue' 
import uniPopup from '@/components/uni-popup/uni-popup.vue'
/* import { quillEditor } from "vue-quill-editor"; */
export default {
	data() {
		return {
			item:{
				"key": "content",
				"data": {
					"fieldId": 382,
					"formType": "textarea",
					"isNull": 1,
					"isDisabled": 0,
					"isUnique": 0,
					"inputTips": null,
					"label": 103,
					"type": 2,
					"fieldName": "content",
					"setting": [],
					"name": "内容",
					"options": null,
					"value": "",
					"fieldType": 1
				},
				"disabled": false,
				"value": "",
				"relation": {}
			},
			warp_top: 0,
			uf_top:'0px',
			mk_show:false,
			pl_edt:false,
			msg_user:'',
			commentList: [],
			isClear: false,
			contentReply:null,
			content: null,
			pushcontent: null,
			editorOption: {},
			buttonType: true,
			commentListRD: [],
			closeable: true,
			closeIconPos: 'top-right',
			show:false,
			pid: '',
			totalRow:0,
			newResourceId: null,
			// 帖子删除弹框
			showDelete: false,
			contentDelete: '确定删除该条资源评论？',
			deleteId: ''
		};
	},
	props: {
		resourceId : {
			type: [String,Number],
			default: ''
		}
	},
	components: {
		EditorBar,
		uniPopup
	/* 	quillEditor */
	},
	watch: {
		resourceId: {
			handler(newVal) {
				if(newVal){
					this.newResourceId = newVal
					this.showComment()
				}
			},
			immediate: true
		}
	},
	onLoad(option) {
		// this.resourceId = option.resourceId
		// this.showComment()
		// this.getComment();
	},
	mounted() {
		let _this = this;
		let obj = uni.createSelectorQuery().select('.uf_umk')				
		obj.boundingClientRect(function (data) {
			console.log(data)
			_this.warp_top = data.top
		   }).exec()
	},
	computed: {
		...mapGetters(['kms']),
		editor() {
		/*  return this.$refs.myQuillEditor.quill; */
		},
	},
	methods: {
		fieldValueChange(data){
			this.msg_user = data.value;
		},
		// 获取焦点
		on_Focus(event){
			let _this = this;
			uni.getSystemInfo({
				success: function (res) {
					let sbh = uni.getSystemInfoSync().statusBarHeight;
					let _rpx = sbh/(uni.upx2px(100)/100) -20;
					_this.uf_top = (res.windowHeight +_rpx - event.detail.height - _this.warp_top) + 'rpx'
				},
			});
		},
		trueFocus(){
			this.show = true;
		},
		falseFocus(){
			// this.msg_user = '',
			this.show = false;
		},
		popPen(){
			this.pl_edt = true;
		},
		popClose(){
			this.pl_edt = false;
		},
		onEditorReady(editor) { // 准备编辑器
		},
		onEditorBlur(){}, // 失去焦点事件
		onEditorFocus(){}, // 获得焦点事件
		onEditorChange(){}, // 内容改变事件
		checkVal(str){
			if(str === null){
				return true
			}else{
				let num = 0,
				reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br>)+<\/p>/g;
				while (num < str.length && str != "")
				{
					num++;
					let k = str.match(reg);
					if (k) {
						str = str.replace(k[0], "");
					}
				}
				return str == "";
			}
		},
		saveHtml(type,num){
			var contemt = this.msg_user
			console.log('提交评论')
/* 			console.log(this.$refs.editorBarReply)
// this.contentReply = this.$refs.editorBarReply.info_
			contemt = this.$refs.editorBarReply.value
			if(type === 'commentRe'){
				this.pid = ''
			} */
			if(this.checkVal(contemt)){
				this.$refs.uToast.show({
					title: '请输入有效的内容',
					type:"error",
					position:"bottom"
				})
			}else{
				this.addComment(contemt, num)	
				
			}
		},
		// 跳转到全部回复
		toAllReply() {
			uni.navigateTo({
				url: '/pages/kmsManagement/kmsFunList/course/discussRedly'
			});
		},
		// 点赞
		getLike(index) {
			this.commentList[index].isLike = !this.commentList[index].isLike;
			if (this.commentList[index].isLike == true) {
				this.commentList[index].likeNum++;
			} else {
				this.commentList[index].likeNum--;
			}
		},
		replyRed(item){
			this.contentReply = ''
			this.pid = item && item.commentId
			this.show = true
		},
		// 添加评论
		addComment(cont,num){
			let self = this;
			let params = {
				entity: {
					label: 101,
					resourceId: self.newResourceId,//评论对象的id
					content: cont,
					pid: this.pid,
					isAnonymous:num
					}
			}
			KmsAddCommentBbs(params).then(res => {
				this.show = false
				self.showComment()
				this.msg_user = '';
			})
		},
		// 查看评论
		showComment(){
			let self = this;
			let params = {
				label: 101,
				resourceId: self.newResourceId,//评论对象的id
				pid: '',
				page: 1,
				limit: 4
			}
			KmsCommentListBbs(params).then(res => {
				self.commentListRD = res.data.list
				self.totalRow = res.data.totalRow
			})
		},
		deleteMobel(id){
			this.showDelete = true
			this.deleteId = id
		},
		//删除评论
		deleteComBbs(){
			let self = this;
			let params = {
			    commentId: this.deleteId,
				label: 101
			}
			KmsDeleteCommentBbs(params).then(res => {
			    self.showComment()
			})
		}
	}
};
</script>
<style lang="scss" scoped>
	/* @import 'quill/dist/quill.core.css';
	@import 'quill/dist/quill.snow.css';
	@import 'quill/dist/quill.bubble.css'; */
	.warp {
		/* display: flex;
		align-items: center;
		justify-content: center; */
		height: 100%;
		margin-top:255px;
	}
.comment {
	display: flex;
	padding: 30rpx;
	.left {
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #f2f2f2;
		}
	}
	.right {
		flex: 1;
		padding-left: 20rpx;
		font-size: 30rpx;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
			.name {
				color: #5677fc;
			}
			.like {
				display: flex;
				align-items: center;
				color: #9a9a9a;
				font-size: 26rpx;
				.num {
					margin-right: 4rpx;
					color: #9a9a9a;
				}
			}
			.highlight {
				color: #5677fc;
				.num {
					color: #5677fc;
				}
			}
		}
		.content {
			margin-bottom: 10rpx;
		}
		.reply-box {
			background-color: rgb(242, 242, 242);
			border-radius: 12rpx;
			.item {
				padding: 20rpx;
				border-bottom: solid 2rpx $u-border-color;
				.username {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.all-reply {
				padding: 20rpx;
				display: flex;
				color: #5677fc;
				align-items: center;
				.more {
					margin-left: 6rpx;
				}
			}
		}
		.bottom {
			margin-top: 20rpx;
			display: flex;
			font-size: 24rpx;
			color: #9a9a9a;
			.reply {
				color: #5677fc;
				margin-left: 10rpx;
			}
		}
	}
}
.fu-text {
	background-color: #FAB6B6;
	margin: 20rpx 40rpx;
	height: 200rpx;
}
.publishBtn {
	margin: 20rpx 40rpx;
	height: 80rpx;
	border: 1px solid #999;
}
// 编辑器
.wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .title {
      font-size: 16rpx;
      color: #007AFF;
      padding-bottom: px2rem(6);
      line-height: 150%;
    }
    .input-wrapper {
      display: flex;
      flex-direction: row;
      width: 100%;
      margin: px2rem(5) 0;
      box-sizing: border-box;
      .editor{
        width: 100%;
        height: px2rem(200);
      }
      .sub-title {
        font-size: 20rpx;
        color: #09BB07;
      }
      .field {
        flex: 1;
        border: 1px solid #09BB07;
      }
    }
  }
  .editorBar{
	  margin-top: 30px!important;
  }
  .discussBtn{
	  width: 50px;
	  height: 50px;
	  line-height: 50px;
	  border-radius: 50%;
	  position: fixed;
	  bottom: 20px;
	  right: 10px;
	  text-align: center;
	  background-color: #E0584B;
  }
</style>
<style>
	#app {
	 font-family: 'Avenir', Helvetica, Arial, sans-serif;
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
	 text-align: center;
	 color: #2c3e50;
	 margin-top: 60px;
	}
</style>